<template>
  <w-view>
    <layout-property :w="w" />
  </w-view>
</template>

<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import Pub from '../widget.pub.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Swiper',
        remark: '滑块视图容器',
        extends: [Pub],
        attrs: [{
          name: 'arrow',
          type: 'Boolean',
          remark: '是否显示切换箭头',
          default: '',
        }, {
          name: 'indicator-dots',
          type: 'Boolean',
          remark: '是否显示面板指示点',
          default: '',
        }, {
          name: 'duration',
          type: 'Number',
          remark: '滑动动画时长。单位毫秒',
          default: '',
        }, ],
        examples: [{
          remark: '范例',
          type: 'html',
          view: true,
          code: `
            <w-swiper height="200" current="0" :indicator-dots="true">
              <w-swiper-item key="0">
                <w-html style="background-color: lightblue;">blue</w-html>
              </w-swiper-item>
              <w-swiper-item key="1">
                <w-html style="background-color: lightsalmon;">salmon</w-html>
              </w-swiper-item>
              <w-swiper-item key="2">
                <w-html style="background-color: lightcoral;">coral</w-html>
              </w-swiper-item>
            </w-swiper>
            `
        }]
      }
    },
  }
</script>

<style>

</style>
